<template>
  <div
    class="text-bold text-center row text-warning items-center q-gutter-sm"
    :class="needDialog ? 'cursor-pointer' : ''"
    @click="showDialog()"
  >
    <div>{{ $t(lang + "急停状态") }}</div>
    <q-spinner-orbit size="2rem" color="warning" />
  </div>
  <stop-dialog ref="dialog" />
</template>

<script setup>
import { onMounted, ref } from "vue";
import StopDialog from "components/status/dialog/StopDialog.vue";

const props = defineProps({
  needDialog: { type: Boolean, default: false }, // 是否需要弹窗
});

const lang = "indexPage.deviceStop.";
const dialog = ref();

onMounted(() => {
  dialog.value.visible = props.needDialog;
});
function showDialog() {
  dialog.value.visible = props.needDialog;
}
</script>

<style scoped></style>
